<template>
	<view class="">
		<alltitleVue :title="title" :url="url" />
		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="24" height="600rpx">
			<view class="pop-tit pop-bor">
				选择退款原因
			</view>
			<scroll-view class="popup-box popup-boxTwo" scroll-y="true">
				<view class="refundBox" v-for="(item, index) in refundData" :key="item.id">
					<view>{{ item.title }}</view>
					<view :class="['checkbox', { selected: index==isRefund }]" class="checkbox"
						@click="toggleItemSelection(item, index)">
						<u-icon v-if="index==isRefund" color="#fff" size="32" name="checkmark"></u-icon>
					</view>
					<!-- 展示退款原因名称 -->
				</view>
			</scroll-view>
			<view class="refund-btn">
				<view class="butt butts" @click="confirmRefund">
					确定
				</view>
				<view class="butt " @click="thinkAgain">
					我再想想
				</view>

			</view>
		</u-popup>
		<view class="cart-box" v-for="item in cartData" :key="item.id">

			<view class="cart-item">
				<image :src="item.goods.photoUrl.split(',')[0]" class="item-image" />
				<view class="actions-main">
					<view class="item-details">
						<text>{{ item.goods.title }}</text>

					</view>
					<view class="main-item">
						<view class="box-text">
							￥
							<text>{{ item.goods.price || 0 }}</text>
						</view>

						<view class="box-text all-text">
							x
							<text class="all-text">{{item.count}}</text>
						</view>
					</view>
				</view>

			</view>


		</view>
		<view class="cart-box">
			<view class="flex justify-content">
				<text>售后方式</text>
				<view class="">
					仅退款
				</view>
			</view>
			<view class="flex justify-content pad-top">
				<text>退款原因</text>
				<view class="flex" @click="refund">
					<text>{{refundParams.refundCause}}</text>
					
					<image class="right-img" :src="right" mode=""></image>
				</view>
			</view>
		</view>
		<view class="cart-box">
			<view class="flex justify-content">
				<text>退款金额</text>
				<view class="">
					<text>￥{{orderDetails.totalPrice}}</text>
					<text v-if="orderDetails.totalPrice<1000">(不包含运费￥12.00)</text>
				</view>
			</view>

		</view>
		<view class="cart-box">
			<view class="flex">
				<text>手机号码</text>
				<view class="">
					<input type="text" v-model="modile" />
				</view>
			</view>
			<view class="bot-box">
				<text>退款说明</text>
				<view class="box-text">
					<textarea name="" placeholder="选填，200字" v-model="refundParams.content" id="" cols="30"
						rows="5"></textarea>
				</view>
			</view>
			<view class="bot-box">
				<text>上传凭证</text>
				<view class="box-text">
					<u-upload :action="action" :header="uploadHeaders" :file-list="fileList"
						@on-success="handleUploadSuccess" @fail="handleUploadFail"></u-upload>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="bot">
				提交
			</view>
		</view>



	</view>

</template>

<script>
	import {
		toast,
		getStore
	} from "../../utils";
	import {
		applyGoods,
		address,
		getregistration,
		goodsOrderDetails,
		setGoodspay

	} from '../../service/api.js'
	import config from "../../utils/config";


	export default {
		computed: {
			// 动态构建上传的 header
			uploadHeaders() {
				return {
					Authorization: `Bearer ${this.token}`, // 把 token 加到请求头中
					'Custom-Header': 'CustomValue', // 如果需要其他自定义头部，添加这里
					"clientid": "af80f6d0dc2d2f09587d2bd25e384d84"
				};
			}
		},
		onShow() {
			this.token = getStore('token')
		},


		data() {
			return {
				right: config.ossHost + "2025/01/09/ee1bcb20aa0b4ae5a14ad5dce09c3ba6.png",
				action: config.host + '/resource/oss/upload',
				token: "",
				show: false,
				title: "申请退款",
				cartData: [],
				isRefund: 0,
				refundParams: {
					id: "",
					refundCause: "",
					content: "",
					photo: "",
					modile: ""
				},
				refundData: [{
						title: "我不想要了",
						selected: false,
					},
					{
						title: "收货地址信息填写错误",
						selected: false,
					},
					{
						title: "商品缺货",
						selected: false,
					},
					{
						title: "其他",
						selected: false,
					}
				],
				refundtext: "",
			}
		},
		onLoad(options) {

			if (options.order) {
				this.order = true
			}

			if (options.id) {

				this.shopId = options.id
				this.getStatus(options.id);

			}



		},
		methods: {
			handleUploadSuccess(response, file, fileList) {
				if (response && response.data && response.data.url) {
					// 如果 `this.params[this.index].photo` 存在并且是一个字符串，则拼接新的 URL
					if (this.refundParams.photo) {
						// 检查是否已经有 URL，如果有，则用逗号拼接
						this.refundParams.photo += ',' + response.data.url;
					} else {
						// 如果没有 URL，则直接赋值
						this.refundParams.photo = response.data.url;
					}

					console.log(this.refundParams.photo); // 输出拼接后的 URL 字符串
					console.log(this.params, "1111111111111");
				}
			},



			//我再想想
			thinkAgain() {
				this.show = false;
			},
			toggleItemSelection(item, index) {
				this.isRefund = index;
			},
			//确认退款
			confirmRefund() {

				this.refundParams.refundCause = this.refundData[this.isRefund].title;
				// this.refundOrder()

			},
			refund(item) {
				this.show = true;
			},
			//获取商城订单状态
			async getStatus(id) {
				let res = await getregistration("commodity_status");
				if (res.code == 200) {
					this.status = res.rows;
					this.getOrderList(id);
					// consoloe.log(this.status, )
				}
			},


			//获取商城列表
			async getOrderList(id) {
				let res = await goodsOrderDetails(id);
				if (res.code == 200) {

					this.orderDetails = res.data;
					this.statusValue = res.data.status;
					//退款申请id
					this.refundParams.id = res.data.id;
					this.caseList = res.data.address;
					this.cartData = res.data.goodsOrderDetails;

					// this.caseList.seleAddress = res.data.address.shippingAddress + res.data.address.address;

					// this.register = res.rows;

				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.checkbox {
		width: 30rpx;
		height: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 50%;
		margin-right: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		cursor: pointer;
		background-color: white;
	}

	.checkbox.selected {
		border: 1rpx solid #CCA566;
		background-color: #CCA566;
	}


	.cart-box {
		margin: 0 24rpx;
		margin-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.flex {

			padding: 24rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;

		}

		.bot-box {
			margin: 24rpx;
			margin-top: 0;
			font-size: 24rpx;

			.box-text {
				margin-top: 15rpx;

				textarea {
					height: 150rpx;
				}
			}
		}

		.justify-content {
			justify-content: space-between;
		}

		.pad-top {
			padding-top: 0rpx;
		}

		.cart-tit {
			padding: 24rpx 24rpx 0rpx 24rpx;
			font-size: 24rpx;
			font-weight: bold;
		}

		.cart-item {

			display: flex;
			align-items: center;
			padding: 24rpx;

			.item-image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-right: 16rpx;
			}
		}

		.refund-box {
			display: flex;
			justify-content: flex-end;
			.refund {
				margin: 24rpx 24rpx 24rpx 0;
				padding: 12rpx 0;
				width: 144rpx;
				text-align: center;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				color: #1A1A1A;
				border: 1rpx solid #E6E6E6;
			}
		}
	}



	.pop-tit {
		text-align: center;
		padding: 40rpx 0;
		font-size: 32rpx;
		color: #1A1A1A;
		border-bottom: 1rpx solid #E6E6E6;
	}
	.popup-box {
		.refundBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			font-size: 24rpx;
			border-bottom: 1rpx solid #E6E6E6;
		}
		.refundBox:last-child {
			border-bottom: none;
		}
	}
	.actions-main {
		height: 180rpx;
		width: 450rpx;
		display: flex;
		flex-direction: column;
		.main-item {
			display: flex;
			justify-content: space-between;
		}
	}
	.box-text {
		color: #FF7C54;
		text {
			font-weight: bold;
			font-size: 32rpx;
		}
	}

	.refund-btn {
		width: 702rpx;
		height: 80rpx;
		margin: auto;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;

		.butt {
			width: 339rpx;
			height: 80rpx;
			border-radius: 8rpx;
			background: #CCA566;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}

		.butts {
			color: #CCA566;
			background: #fff;
			border: 2rpx solid #CCA566;
		}
	}
	.footer{
		height: 180rpx;
		width: 100%;
		position: fixed;
		z-index: 10;
		bottom: 0;
		background: #FFFFFF;
		.bot{
			width: 702rpx;
			margin: auto;
			margin-top: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
			background: #CCA566;
		}
	}
</style>